<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>align-items</title>
         <!-- 设置标题栏中标题之前的小图标 -->
        <link rel="shortcut icon" href="kfm.jpg" type="image/x-icon">
        <!-- 链接外部样式文件 -->
        <link rel="stylesheet" href="align-items.css">
    </head>
    <body>

        <h3>align-items</h3>

        <div class="wrapper">
            <p class="title">row nowrap / space-between / align-items: stretch</p>
            <p class="desc">主轴: 水平从左到右 / 交叉轴: 垂直从上到下 </p>
            <div class="flex-container first">
                <div class="flex-item">天</div>
                <div class="flex-item">地</div>
                <div class="flex-item">玄</div>
                <div class="flex-item">黄</div>
            </div>
        </div>

        <div class="wrapper">
            <p class="title">row nowrap / space-between / align-items: center</p>
            <p class="desc">主轴: 水平从左到右 / 交叉轴: 垂直从上到下 </p>
            <div class="flex-container second">
                <div class="flex-item">天</div>
                <div class="flex-item">地</div>
                <div class="flex-item">玄</div>
                <div class="flex-item">黄</div>
            </div>
        </div>

        <div class="wrapper">
            <p class="title">row wrap / space-between / align-items: center</p>
            <p class="desc">主轴: 水平从左到右 / 交叉轴: 垂直从上到下 </p>
            <div class="flex-container third">
                <div class="flex-item">天</div>
                <div class="flex-item">地</div>
                <div class="flex-item">玄</div>
                <div class="flex-item">黄</div>
            </div>
        </div>

        <div class="wrapper">
            <p class="title">row wrap / space-between / align-items: flex-start</p>
            <p class="desc">主轴: 水平从左到右 / 交叉轴: 垂直从上到下 </p>
            <div class="flex-container fourth">
                <div class="flex-item">天</div>
                <div class="flex-item">地</div>
                <div class="flex-item">玄</div>
                <div class="flex-item">黄</div>
            </div>
        </div>

        <div class="wrapper">
            <p class="title">row wrap / space-between / align-items: flex-end</p>
            <p class="desc">主轴: 水平从左到右 / 交叉轴: 垂直从上到下 </p>
            <div class="flex-container fifth">
                <div class="flex-item">天</div>
                <div class="flex-item">地</div>
                <div class="flex-item">玄</div>
                <div class="flex-item">黄</div>
            </div>
        </div>

        <div class="wrapper">
            <p class="title">column wrap-reverse / space-between / align-items: flex-end</p>
            <p class="desc">主轴: 垂直从上到下 / 交叉轴: 水平从右到左 </p>
            <div class="flex-container sixth">
                <div class="flex-item">天</div>
                <div class="flex-item">地</div>
                <div class="flex-item">玄</div>
                <div class="flex-item">黄</div>
            </div>
        </div>

        <div class="wrapper">
            <p class="title">row nowrap / space-between / align-items: baseline</p>
            <p class="desc">主轴: 垂直从上到下 / 交叉轴: 水平从右到左 </p>
            <div class="flex-container seventh">
                <div class="flex-item">
                    hello
                    <br>
                    world
                </div>
                <div class="flex-item">
                    good
                    <br>
                    boy
                    <br>
                    gold
                </div>
                <div class="flex-item">
                    flex
                </div>
                <div class="flex-item">yellow</div>
            </div>
        </div>

    </body>
</html>